<template>
	<view class="page bg-img" >
	<!-- 	<view class="cu-custom" :style="{height: CustomBar+'px',paddingTop: StatusBar+'px'}">
			<view class="cu-bar fixed bg-img" :style="{height: CustomBar+'px',paddingTop: StatusBar+'px'}">
				<view class="content" :style="[{top:StatusBar+'px'}]">
					<view class="text-white">{{i18n['直播']}}</view>
				</view>
			</view>
		</view> -->
    <fu-custom :isBack="true" bgColor="bg-white">
      <block slot="content" >
        <view class="">{{i18n['直播']}}</view>
      </block>
    </fu-custom>
    <view style="margin-top: 100rpx;" v-if="isLoad">
      <fu-loading ></fu-loading>
    </view>

    <block v-else>
		<view class="container">
			<block v-for="(item,index) in list" :key="index">
				<view class="item"  @click="navToRoom(item.roomid)">
					<view class="block-280">
						<image class="" :src="item.share_img" mode="aspectFill"></image>
						<view class="status">{{item.live_status}}</view>
					</view>
					<view class="info">
						<view class="auth">
							<view class="room-name text-cut">{{item.name}}</view>
							<view class="room-anchor">
								<view class="block-60">
									<image :src="item.cover_img" mode="aspectFill"></image>
								</view>
								<view class="name text-cut">{{item.anchor_name}}</view>
							</view>
						</view>
						<view class="flex">
							<block v-for="(ele,j) in item.goods" :key="j" >
								<view class="goods" v-if="j < 3">
									<image :src="ele.cover_img" mode="aspectFill"></image>
									<view class="price text-price text-cut">{{ele.price2 | filterPrice}}</view>
								</view>
							</block>
						</view>
					</view>
				</view>
			</block>
		</view>
    <uni-load-more :status="status"></uni-load-more>
    <fu-empty-ui v-if="list.length == 0" emptyImage="coupons" :pagingListNoListDataText="i18n['暂无直播']"></fu-empty-ui>
    </block>
		<!-- <navigator url="/pagesB/create_live_room">
			<view class="float-btn flex justify-center align-center">
				<text class="cuIcon-add" style="font-size: 48rpx;"></text>
			</view>
		</navigator> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgLink: this.$imgLinks,
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				page: 0,
				size: 10,
				status: 'more', // more loading noMore
				list: [],
        isLoad:true,//初始化加载
			}
		},
		filters: {
			filterPrice(val){
				let str = val.toString();
				return str.substring(0,str.length - 2);
			}
		},
		onLoad() {
			this.getRooms(true);
      this.setTabBarItem();
		},
		onPullDownRefresh() {
			this.page = 0;
			this.status = 'more';
			this.getRooms();
		},
		onReachBottom() {
			this.getRooms();
		},
		methods: {
			// 获取房间列表
			getRooms(isInit) {
				if (this.status != 'more') return;
        if(isInit) this.isLoad = true;
				this.status = 'loading';
				// 请求数据
				this.$api.post(global.apiUrls.getLive, {
					start: this.page,
					limit: this.size
				}).then(res => {
					console.log('直播列表',res);
					if (res.data.code == 1) {
						let list = res.data.data.room_info;
						list.forEach(item => {
							switch (item.live_status) {
								case 101:
									item.live_status = this.i18n['直播中'];
									break;
								case 102:
									item.live_status = this.i18n['未开始'];
									break;
								case 103:
									item.live_status = this.i18n['已结束'];
									break;
								case 104:
									item.live_status = this.i18n['禁播'];
									break;
								case 105:
									item.live_status = this.i18n['暂停中'];
									break;
								case 106:
									item.live_status = this.i18n['异常'];
									break;
								case 107:
									item.live_status = this.i18n['已过期'];
									break;
							}
						})
						if(this.page == 0){
							this.list = [];
						}
						this.list = this.list.concat(list);

						if (this.list.length >= res.data.total) {
							this.status = 'noMore';
						} else {
							this.page += this.size;
							this.status = 'more';
						}

					}else{
            this.status = 'noMore';
          }
          if(isInit) this.isLoad = false;
					uni.stopPullDownRefresh();
				}).catch(err=>{
          if(isInit) this.isLoad = false;
        })
			},
			// 去直播页
			navToRoom(id) {
				let roomId = id;
				wx.navigateTo({
					url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100%;
		background-color: #F2F2F2;
		background-size: contain;
		background-repeat: no-repeat;
		.cu-bar{
			background-size: cover;
		}
	}
	.bg-img{
		// background-image: url('../../static/010.png');
		// background-position: top;
	}
	.container {
		padding: 0 20rpx;
		.item {
			// height: 280rpx;
			margin-top: 20rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			overflow: hidden;
			display: flex;
			padding: 24rpx;
			box-sizing: border-box;
			.block-280{
				width: 280rpx;
				height: 280rpx;
				min-width: 280rpx;
				min-height: 280rpx;
				border-radius: 16rpx 0 0 16rpx;
				position: relative;
				overflow: hidden;
				background-color: #F2F2F2;
				image{
					width: 100%;
					height: 100%;
					border-radius: 16rpx 0 0 16rpx;
				}
				.status{
					position: absolute;
					top: -1rpx;
					left: -1rpx;
					background-color: $theme;
					border-radius: 16rpx 16rpx 16rpx 0;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 40rpx;
					padding: 0 20rpx;
				}
			}
			.info {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding:0 20rpx;
				justify-content: space-between;
				.auth{
					.room-name{
						font-size: 28rpx;
						color: #333333;
					}
					.room-anchor{
						margin-top: 10rpx;
						display: flex;
						align-items: center;
						.block-60{
							width: 50rpx;
							height: 50rpx;
							min-width: 50rpx;
							min-height: 50rpx;
							image{
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}
						.name{
							margin-left: 20rpx;
							font-size: 24rpx;
							color: #666666;
						}
					}
				}
				.goods{
					background-color: #007AFF;
					border-radius: 12rpx;
					position: relative;
					width: 120rpx;
					height: 120rpx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 12rpx;
					}
					.price{
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						height: 36rpx;
						font-size: 24rpx;
						font-weight: bold;
						text-align: center;
						line-height: 36rpx;
						border-radius: 0 0 12rpx 12rpx;
						color: #FFFFFF;
						background-color: rgba(200,200,200,.5);
					}
				}
				.goods+.goods{
					margin-left: 10rpx;
				}
			}
		}
	}
	.float-btn{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: $theme;
		color: #FFFFFF;
		position: fixed;
		bottom: 60rpx;
		bottom: calc(60rpx + constant(safe-area-inset-bottom));
		bottom: calc(60rpx + env(safe-area-inset-bottom));
		right: 20rpx;
	}
</style>
